<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid 布局示例</title>
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2ecc71;
            --accent-color: #e74c3c;
            --background-color: #f5f5f5;
            --text-color: #333;
            --border-color: #ddd;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: var(--background-color);
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            text-align: center;
            margin-bottom: 30px;
            color: var(--primary-color);
        }

        .demo-section {
            margin-bottom: 50px;
            padding: 20px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            background-color: #f9f9f9;
        }

        h2 {
            margin-bottom: 15px;
            color: var(--secondary-color);
            border-bottom: 2px solid var(--border-color);
            padding-bottom: 10px;
        }

        h3 {
            margin: 20px 0 10px;
            color: var(--primary-color);
        }

        .grid-container {
            background-color: #e0e0e0;
            padding: 10px;
            border-radius: 6px;
            margin: 15px 0;
        }

        .grid-item {
            background-color: var(--primary-color);
            color: white;
            padding: 20px;
            text-align: center;
            border-radius: 4px;
            transition: background-color 0.3s;
        }

        .grid-item:hover {
            background-color: #2980b9;
        }

        .code-block {
            background-color: #2c3e50;
            color: #ecf0f1;
            padding: 15px;
            border-radius: 6px;
            overflow-x: auto;
            margin: 15px 0;
            font-family: 'Courier New', Courier, monospace;
        }

        .description {
            margin-bottom: 15px;
            line-height: 1.6;
        }

        /* 示例1: 基本网格布局 */
        .grid-basic {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 10px;
        }

        /* 示例2: 响应式网格布局 */
        .grid-responsive {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            grid-gap: 10px;
        }

        /* 示例3: 带有跨度的网格布局 */
        .grid-span {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 10px;
        }

        .grid-span .item1 {
            grid-column: 1 / 3;
        }

        .grid-span .item4 {
            grid-row: 2 / 4;
        }

        /* 示例4: 自动填充和自动适应 */
        .grid-auto {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            grid-gap: 10px;
        }

        /* 示例5: 嵌套网格布局 */
        .grid-nested {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 10px;
        }

        .nested-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 5px;
        }

        .nested-grid .grid-item {
            background-color: var(--accent-color);
            padding: 10px;
        }

        /* 示例6: 基于线的定位 */
        .grid-line-based {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(3, 100px);
            grid-gap: 10px;
        }

        .grid-line-based .item1 {
            grid-column-start: 1;
            grid-column-end: 5;
        }

        .grid-line-based .item2 {
            grid-row-start: 2;
            grid-row-end: 4;
        }

        .grid-line-based .item5 {
            grid-column-start: 2;
            grid-column-end: 5;
        }

        /* 示例7: 命名区域 */
        .grid-named-areas {
            display: grid;
            grid-template-columns: 1fr 3fr;
            grid-template-rows: 100px auto 100px;
            grid-gap: 10px;
            grid-template-areas:
                "header header"
                "sidebar main"
                "footer footer";
        }

        .header {
            grid-area: header;
            background-color: var(--primary-color);
        }

        .sidebar {
            grid-area: sidebar;
            background-color: var(--secondary-color);
        }

        .main {
            grid-area: main;
            background-color: var(--accent-color);
        }

        .footer {
            grid-area: footer;
            background-color: #9b59b6;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>CSS Grid 布局示例</h1>

        <!-- 示例1: 基本网格布局 -->
        <section class="demo-section">
            <h2>1. 基本网格布局</h2>
            <div class="description">
                这是一个基本的3列网格布局，使用<code>grid-template-columns</code>和<code>grid-gap</code>属性定义列数和间距。
            </div>
            <div class="grid-container grid-basic">
                <div class="grid-item">1</div>
                <div class="grid-item">2</div>
                <div class="grid-item">3</div>
                <div class="grid-item">4</div>
                <div class="grid-item">5</div>
                <div class="grid-item">6</div>
            </div>
            <div class="code-block">
.grid-basic {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}
            </div>
        </section>

        <!-- 示例2: 响应式网格布局 -->
        <section class="demo-section">
            <h2>2. 响应式网格布局</h2>
            <div class="description">
                这个布局会根据屏幕尺寸自动调整列数，使用<code>auto-fit</code>和<code>minmax</code>确保在各种设备上都有良好的显示效果。
            </div>
            <div class="grid-container grid-responsive">
                <div class="grid-item">1</div>
                <div class="grid-item">2</div>
                <div class="grid-item">3</div>
                <div class="grid-item">4</div>
                <div class="grid-item">5</div>
                <div class="grid-item">6</div>
                <div class="grid-item">7</div>
            </div>
            <div class="code-block">
.grid-responsive {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 10px;
}
            </div>
        </section>

        <!-- 示例3: 带有跨度的网格布局 -->
        <section class="demo-section">
            <h2>3. 带有跨度的网格布局</h2>
            <div class="description">
                展示如何使用<code>grid-column</code>和<code>grid-row</code>属性让网格项跨越多列或多行。
            </div>
            <div class="grid-container grid-span">
                <div class="grid-item item1">1 (跨2列)</div>
                <div class="grid-item">2</div>
                <div class="grid-item">3</div>
                <div class="grid-item item4">4 (跨2行)</div>
                <div class="grid-item">5</div>
                <div class="grid-item">6</div>
                <div class="grid-item">7</div>
            </div>
            <div class="code-block">
.grid-span {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}

.grid-span .item1 {
    grid-column: 1 / 3;
}

.grid-span .item4 {
    grid-row: 2 / 4;
}
            </div>
        </section>

        <!-- 示例4: 自动填充和自动适应 -->
        <section class="demo-section">
            <h2>4. 自动填充和自动适应</h2>
            <div class="description">
                使用<code>auto-fill</code>创建尽可能多的列，每列宽度至少为150px，最大为1fr。
            </div>
            <div class="grid-container grid-auto">
                <div class="grid-item">1</div>
                <div class="grid-item">2</div>
                <div class="grid-item">3</div>
                <div class="grid-item">4</div>
                <div class="grid-item">5</div>
                <div class="grid-item">6</div>
            </div>
            <div class="code-block">
.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-gap: 10px;
}
            </div>
        </section>

        <!-- 示例5: 嵌套网格布局 -->
        <section class="demo-section">
            <h2>5. 嵌套网格布局</h2>
            <div class="description">
                展示如何在一个网格布局中嵌套另一个网格布局，创建更复杂的布局结构。
            </div>
            <div class="grid-container grid-nested">
                <div class="grid-item">1</div>
                <div class="grid-item">2</div>
                <div class="grid-item nested-grid">
                    <div class="grid-item">3.1</div>
                    <div class="grid-item">3.2</div>
                    <div class="grid-item">3.3</div>
                    <div class="grid-item">3.4</div>
                </div>
                <div class="grid-item">4</div>
                <div class="grid-item">5</div>
                <div class="grid-item">6</div>
            </div>
            <div class="code-block">
.grid-nested {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}

.nested-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 5px;
}
            </div>
        </section>

        <!-- 示例6: 基于线的定位 -->
        <section class="demo-section">
            <h2>6. 基于线的定位</h2>
            <div class="description">
                使用<code>grid-column-start</code>, <code>grid-column-end</code>, <code>grid-row-start</code>和<code>grid-row-end</code>属性精确控制网格项的位置。
            </div>
            <div class="grid-container grid-line-based">
                <div class="grid-item item1">1 (横跨所有列)</div>
                <div class="grid-item item2">2 (纵跨两行)</div>
                <div class="grid-item">3</div>
                <div class="grid-item">4</div>
                <div class="grid-item item5">5 (横跨列2-4)</div>
                <div class="grid-item">6</div>
                <div class="grid-item">7</div>
            </div>
            <div class="code-block">
.grid-line-based {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 100px);
    grid-gap: 10px;
}

.grid-line-based .item1 {
    grid-column-start: 1;
    grid-column-end: 5;
}

.grid-line-based .item2 {
    grid-row-start: 2;
    grid-row-end: 4;
}
            </div>
        </section>

        <!-- 示例7: 命名区域 -->
        <section class="demo-section">
            <h2>7. 命名区域</h2>
            <div class="description">
                使用<code>grid-template-areas</code>创建语义化的布局区域，使代码更易于理解和维护。
            </div>
            <div class="grid-container grid-named-areas">
                <div class="grid-item header">头部</div>
                <div class="grid-item sidebar">侧边栏</div>
                <div class="grid-item main">主内容</div>
                <div class="grid-item footer">底部</div>
            </div>
            <div class="code-block">
.grid-named-areas {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 100px auto 100px;
    grid-gap: 10px;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.main {
    grid-area: main;
}

.footer {
    grid-area: footer;
}
            </div>
        </section>
    </div>
</body>
</html>